<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      height: 100vh;
    }
    .box {
      height: 20px;
      width: 20px;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
    }
  </style>
  <body>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=973c31822203d5d7e813bb2903afd5fe"
    ></script>

    <div id="container"></div>
    <script>
      //基本地图加载
      //初始化地图对象，加载地图
      var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13,
        center: ["108.939621", "34.343147"],
        mapStyle: "amap://styles/3a36e8078dca95476cd9363fb3a960df",
      });

      // 加载点聚合插件
      map.plugin(["AMap.MarkerCluster"], function () {
        var cluster = new AMap.MarkerCluster(map, points, {
          gridSize: 80, // 聚合网格像素大小
        });
      });
    </script>
  </body>
</html>
